<template>
	<!-- 九学王 连续包月 审核版 -->
	<view class="jxw_sh_lxby">
		<view class="top_image">
			<image src="/static/jxw/sh_lxby/top.png" style="width: 750rpx" mode="widthFix"></image>
		</view>

		<view class="form-container">
			<uni-forms class="login-form" ref="accountForm" :model="formData">
				<uni-forms-item id="test" class="input-phone">
					<input placeholder="请输入手机号" type="text" id="mobile" readonly maxlength="11"
						style="text-align: center; font-size: 36rpx" v-model="formData.mobile" class="uni-input-input"
						placeholder-style="color: #969696" />
				</uni-forms-item>
				<uni-forms-item style="margin-top: 40rpx">
					<view class="send-code">
						<input style="width: 420rpx; margin-left: 50rpx; text-align: center; font-size: 36rpx"
							maxlength="6" type="tel" v-model="formData.smsCode" placeholder="请输入验证码"
							class="uni-input-input" placeholder-style="color: #969696" />
						<!-- <view class="code-line"></view> -->

						<view class="code" :style="{ cursor: isSend ? 'not-allowed' : '' }">
							<up-button @click="sendCode(true)" class="sendCode"
								:disabled="isSend ? true : false">{{ isSend ? `重新发送 ${isNum}` : '获取验证码' }}</up-button>
						</view>
					</view>
				</uni-forms-item>
				<view class="login-btn" style="text-align: center">
					<image src="/static/jxw/sh_lxby/btn.png" mode="widthFix" style="width: 600rpx"
						@click="confirmOrder"></image>
				</view>

				<view
					style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; align-items: center; justify-content: center">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #2e2e2e; font-weight: 400; font-size: 26rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #1e7aff; font-weight: 400; font-size: 28rpx"
						@click="privatePro(252430)">《活动规则》</text>
					<text style="color: #1e7aff; font-weight: 400; font-size: 28rpx"
						@click="privatePro(1)">《隐私条款》</text>
				</view>
			</uni-forms>
		</view>
		<view class="bottom_image">
			<image src="/static/jxw/sh_lxby/bottom.png" style="width: 750rpx" mode="widthFix"></image>
		</view>



		<view class="fixed-1" @click="phone">
			<image src="/static/lh/phone.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="privatePro(252430)">
			<image src="/static/lh/rule.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-3" @click="goLink" v-if="token">
			<image src="/static/lh/link.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>

		<view class="arrive-btn" :style="{ display: showHeight > 700 ? '' : 'none' }">
			<image src="/static/jxw/sh_lxby/btn.png" mode="" style="width: 650rpx; height: 110rpx" @click="toTop">
			</image>
		</view>
	</view>
</template>

<script setup>
	//
	import {
		reactive,
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onReady
	} from '@dcloudio/uni-app';
	import initApi from '@/apis/init.js';
	import {
		storeToRefs
	} from 'pinia';
	import {
		useCounterStore
	} from '@/store/counter.js';
	import {
		getProductNum
	} from '@/utils/commo.js';
	import {
		useUserStore
	} from '@/store/user.js';
	import {
		constStore
	} from '@/store/const';
	import {
		uuIds
	} from '@/utils/login.js';
	const uuIdsInit = uuIds();
	const {
		formatPhone
	} = storeToRefs(useCounterStore());
	const {
		token,
		userInfo
	} = storeToRefs(useUserStore());
	const {
		constInfo
	} = storeToRefs(constStore())
	const agreeType = ref(1);
	const popupPro = ref();
	const twoSure = ref();
	const isSend = ref(false);
	const isNum = ref(0);
	const isTimer = ref();
	const showHeight = ref(0);
	const accountForm = ref();
	const allChecked = ref(false);

	const formData = reactive({
		mobile: '',
		smsCode: null,
		orderNo: null,
		channelCode: '',
		productCode: '',
		schemeCode: '',
		osName: '',
		environmentCode: null,
		scenarioCode: null
	});
	const goLink = () => {
		console.log('去哪里');
		uni.navigateTo({
			url: '/pages/lhhy/equity'
		});
	};
	const phone = () => {
		uni.makePhoneCall({
			phoneNumber: '400-8825101' //客服
		});
	};
	onPageScroll((e) => {
		showHeight.value = e.scrollTop;
	});
	onLoad((query) => {
		// if (!query.a) {
		// 	uni.reLaunch({
		// 		url: '/pages/clb/404'
		// 	});
		// }

		if (formatPhone.value) {
			formData.mobile = formatPhone.value;
		}
		formData.channelCode = query.a;


		setTimeout(() => {
			getProductNum(formData.channelCode, 'LH2531', uuIdsInit);
		}, 200);
	});
	watch(
		() => formData.mobile,
		(newVal, oldValue) => {
			const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
			if (isOkMobile) {
				formatPhone.value = newVal;
				uni.hideKeyboard();
				// sendCode(false);
			}
		}
	);
	const toTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	};
	const confirmOrder = async () => {
		try {
			if (!allChecked.value) return uni.utils.toast('请勾选《隐私协议》');
			if (!formData.mobile) return uni.utils.toast('请输入手机号');
			const arr = {
				productCode: "LH2531",
				channelCode: formData.channelCode,
				mobile: formData.mobile,
				orderType: 3,
				paymentMethod: 1,
				// param: paramApi.getParam(),
				uuid: uuIdsInit,
				environmentCode: "12", // 后期需要修改
				scenarioCode: "7"
			};

			// 登录
			const loginRes = await initApi.authRegisterAndLogin({
				mobile: formData.mobile,
				verificationCode: formData.smsCode
			});
			if (loginRes.code == 20000) {
				uni.setStorageSync('token', loginRes.data.accessToken);
				userInfo.value.token = loginRes.data.accessToken;
				userInfo.value.mobile = loginRes.data.mobile;
				userInfo.value.username = loginRes.data.username;
				userInfo.value.info = loginRes.data;
				token.value = loginRes.data.accessToken;
			} else {
				return uni.utils.toast(loginRes.message);
			}
			const res = await initApi.associateMemberSign(arr);
			if (res.code != 20000) return uni.utils.toast(res.message);
			if (res.code == 20000) {
				handleJumpPaySign(res.data);
			}
			clearInterval(isTimer.value);
			isNum.value = 0;
			isSend.value = false;
		} catch (e) {
			//TODO handle the exception
			console.log(e);
		}
	};
	const handleJumpPaySign = async (query) => {
		const device = await uni.getSystemInfo();
		let ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			//是
			if (device.osName == 'android') {
				formData.osName = query.extInfo?.alipaySignUrl;
				let url =
					`${constInfo.value.baseURL}/api/associateMember/command/evokeBroswer?redirect=` +
					encodeURIComponent('https://web.78keji.cn/newbluexy/#/?url=' +
						'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl);
				formData.osName = url;
				window.location.href = url;
			} else if (device.osName == 'ios') {
				formData.osName = device.osName;
				let url =
					'https://ulink.alipay.com/?scheme=alipays%3A%2F%2Fplatformapi%2Fstartapp%3FsaId%3D10000007%26clientVersion%3D3.7.0.0718%26qrcode%3D' +
					encodeURIComponent(encodeURIComponent('https://openapi.alipay.com/gateway.do?' + query.extInfo
						?.alipaySignUrl));
				window.location.href = url;
			}
		} else {
			//不是
			window.location.href = 'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl;
		}
	};
	const changeAll = (val) => {
		if (val.detail.value.length > 0) {
			allChecked.value = true;
		} else {
			allChecked.value = false;
		}
	};
	const privatePro = (type) => {
		agreeType.value = type;
		popupPro.value.open('center');
	};
	const ok1 = () => {
		popupPro.value.close();
		allChecked.value = true;
	};
	const sendCode = async (flag) => {
		// 获取输入框元素

		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(formData.mobile);
		if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');
		if (!allChecked.value) return uni.utils.toast('请勾选《隐私协议》');
		if (isSend.value) return;

		try {
			const arr = {
				mobile: formData.mobile
			};
			//
			const res = await initApi.authSendSms(arr);

			if (res.code == 20000) {
				// privatePro(133);
				// 登录
				/* 	const loginArr = {
				mobile: formData.mobile,
				verificationCode: formData.smsCode
		}
		initApi.authRegisterAndLogin(loginArr) */
			} else {
				return uni.utils.toast(res.message);
			}

			isNum.value = 60;
			isSend.value = true;
			isTimer.value = setInterval(() => {
				if (isNum.value <= 0) {
					clearInterval(isTimer.value);
					isNum.value = 0;
					isSend.value = false;
				}
				isNum.value--;
			}, 1000);
			return uni.utils.toast('验证码发送成功');
		} catch (e) {
			console.log(e);
			//TODO handle the exception
			uni.utils.toast('请输入正确手机号');
			isSend.value = false;
			isNum.value = 0;
			clearInterval(isTimer.value);
		}
	};
</script>

<style lang="scss" scoped>
	.arrive-btn {
		position: fixed;
		bottom: 20rpx;
		width: 750rpx;
		text-align: center;
	}

	:deep(.uni-checkbox-input) {
		border-radius: 80rpx !important;
	}

	::v-deep {
		image {
			vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
		}
	}

	.send-code {
		display: flex;
		height: 100rpx;

		.code-line {
			height: 50rpx;
			width: 2rpx;
			border-left: 2rpx #f23a47 solid;
			margin-top: 25rpx;
			margin-right: 6rpx;
		}

		.code {
			height: 100rpx;
			width: 190rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #f23a47;
			font-size: 30rpx;
			cursor: pointer;
		}
	}

	.form-container {
		margin: 0 auto;
		height: 500rpx;
		width: 750rpx;
		background-color: #bdf3f7;

		.login-btn {
			margin-top: 40rpx;
			animation: scaleUp 2s infinite;
			/* 动画名称、持续时间、是否无限循环 */
		}

		@keyframes scaleUp {

			0%,
			50% {
				transform: scale(1);
				/* 开始时的缩放比例 */
			}

			25%,
			75% {
				transform: scale(1.05);
				/* 缩放比例最大值 */
			}

			100% {
				transform: scale(1);
				/* 结束时的缩放比例 */
			}
		}

		.uni-forms-item {
			height: 100rpx;
			margin: 0 29rpx;
			background-color: #ffffff;
			border-radius: 100rpx;
			box-sizing: border-box;
			width: 692rpx;

			.uni-input-input {
				width: 592rpx;
				margin-left: 50rpx;
				text-align: center;
				font-size: 36rpx;
			}
		}
	}

	.jxw_sh_lxby {
		margin: 0 auto;
		width: 750rpx;
		background-color: #bdf3f7;
		// height: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.sendCode {
		width: 188rpx;
		height: 60rpx;
		background: #1e7aff;
		border-radius: 30rpx;

		line-height: 60rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 26rpx;
		color: #ffffff;
	}
</style>